<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./font/iconfont.css">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        main {
            display: flex;
            justify-content: space-between;

        }

        main .box_left {
            color: white;
            text-align: center;
            min-height: 700px;
            width: 200px;
            background-color: rgb(58, 61, 97);
        }

        main h2 {
            width: 100%;
            height: 30px;
            margin: 20px auto;
        }

        main .u1 {
            width: 100%;
            text-align: left;
            margin-left: 20px;
        }

        main .u1 li {
            line-height: 50px;
            list-style: none;
        }

        main .u2 {
            width: 100%;
            margin-left: -20px;
            background-color: rgb(25, 25, 40);
            text-align: center;
            margin-right: 30px;
            /* margin-left: 40px; */
        }

        main .u2 .gw {
            color: rgb(64, 64, 223);
        }

        main .box_right {
            /* background-color: yellow; */
            flex: 1;
        }

        main .box_right .right_top {
            line-height: 40px;
            height: 40px;
            background-color: aliceblue;
        }

        main .box_right .right_top .top_right {
            height: 30px;
            float: right;
            margin-right: 20px;

        }

        main .box_right .box_center {
            padding-left: 20px;
            /* background-color: cadetblue; */
            border: 1px solid gainsboro;
        }

        main .box_right .box_center .gangwei {
            background-color: rgb(61, 102, 252);
            border: transparent;
            color: white;
            width: 70px;
            height: 20px;
        }

        main .box_right .box_center .shouye {
            height: 20px;
        }

        main .box_right .right_top .top_right .timg {
            margin-left: 20px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            vertical-align: middle;
        }

        main .box_right .center_top {
            text-align: center;
            align-items: center;
            height: 60px;
            line-height: 60px;
            display: flex;
            justify-content: flex-start;
        }

        main .box_right .center_top .sp {
            margin-left: 20px;
        }

        main .box_right .center_top .sousuo {
            border-radius: 5px;
            background: transparent;
            border: 1px solid gainsboro;
            padding-left: 20px;
            margin-left: 10px;
            height: 30px;
            width: 200px;
            outline: none;
        }

        main .box_right .center_top .ssbtn,
        main .box_right .center_top .czbtn {
            height: 30px;
            width: 80px;
            border-radius: 5px;
            margin-left: 10px;
            border: transparent;
        }

        main .box_right .center_top .ssbtn {
            background-color: rgb(61, 102, 252);
            color: aliceblue;
        }

        main .box_right .center_btn {
            display: flex;
            height: 30px;
            line-height: 30px;
        }

        main .box_right .center_btn .span1 {
            margin-left: 20px;
            display: inline-block;
            width: 80px;
            height: 30px;
            text-align: center;
            border-radius: 5px;
            background-color: rgba(0, 0, 255, 0.245);
        }

        main .box_right .center_btn .span1:nth-child(2) {
            background-color: rgba(36, 182, 67, 0.245);
        }

        main .box_right .center_btn .span1:nth-child(3) {
            background-color: rgba(182, 36, 129, 0.245);
        }

        main .box_right .center_btn .span1:nth-child(4) {
            background-color: rgba(231, 242, 76, 0.245);
        }

        main .center_bottom table {
            /* 想要给表格tr添加边框线，需要给table写如下代码，才能让边框显示出来 */
            border-collapse: collapse;
            margin: 20px 0;
            width: 100%;
            min-width: 700px;
            text-align: center;
        }

        main .center_bottom table thead tr td {
            width: 200px;
        }

        main .center_bottom table tbody tr {
            line-height: 41px;
            height: 41px;
            border-top: 1px solid rgb(221, 221, 221);
        }

        main .center_bottom table tbody tr:hover {
            background-color: rgba(240, 240, 240, 0.841);
        }

        main .center_bottom table tbody tr td:nth-child(6) {
            display: inline-block;
            background-color: rgba(96, 96, 245, 0.214);
            height: 30px;
            color: rgb(73, 73, 73);
            outline: none;
            border-radius: 8px;
            text-align: center;
            line-height: 30px;
        }

        main .center_bottom table tbody .trr {
            text-align: center;
            color: red;
            line-height: 41px;
            height: 41px;
            border-top: 1px solid rgb(221, 221, 221);
        }

        main .center_bottom table tbody .trr .tdd {
            text-align: center;
            height: 43px;
        }

        main .center_bottom table tr td .iconfont {
            padding-right: 10px;
        }

        main .center_bottom .yeniu {
            margin: 0 auto;
            width: 200px;
            display: flex;
        }

        main .center_bottom .yeniu .count {
            display: inline-block;
            background-color: blue;
            width: 30px;
            height: 20px;
            color: white;
            text-align: center;
            border-radius: 5px;
            margin-left: 5px;
        }

        main .center_bottom .yeniu .yeshu {
            margin-left: 5px;
            background-color: gainsboro;
            width: 20px;
            height: 20px;
            text-align: center;
            border-radius: 5px;
            border: transparent;

        }
    </style>
</head>

<body>
    <main>
        <div class="box_left">
            <h2>管理系统</h2>
            <div class="left_list">
                <ul class="u1">
                    <li>首页</li>
                    <li>系统管理</li>
                    <ul class="u2">
                        <li>用户管理</li>
                        <li>角色管理</li>
                        <li>菜单管理</li>
                        <li>部门管理</li>
                        <li class="gw">岗位管理</li>
                        <li>字典管理</li>
                        <li>参数设置</li>
                        <li>通知公告</li>
                        <li>日志管理</li>
                    </ul>
                    <li>系统监控</li>
                </ul>
            </div>
        </div>
        <div class="box_right">
            <div class="right_top">
                <div class="top_right">
                    <span>野猫</span>
                    <img class="timg" src="./img/login-background.jpg" alt="">
                </div>
            </div>
            <div class="box_center">
                <button class="shouye">首页</button>
                <button class="gangwei">岗位管理</button>
            </div>
            <div class="center">
                <div class="center_top">
                    <span class="sp">岗位名称</span>
                    <input class="sousuo" type="text" placeholder="请输入岗位名称">
                    <button class="ssbtn">搜索</button>
                    <button class="czbtn">重置</button>

                </div>
            </div>
            <div class="center_btn">
                <span class="span1">新增</span>
                <span class="span1">修改</span>
                <span class="span1">删除</span>
                <span class="span1">导出</span>
            </div>
            <div class="center_bottom">
                <table>
                    <thead>
                        <tr>
                            <td><input type="checkbox"></td>
                            <td>岗位编号</td>
                            <td>岗位编码</td>
                            <td>岗位名称</td>
                            <td>岗位排序</td>
                            <td>状态</td>
                            <td>创建时间</td>
                            <td>操作</td>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <div class="yeniu">
                    <span class="tiao">共5条</span>
                    <button class="yeshu yeshu1">&lt;</button>
                    <span class="count">1</span>
                    <button class="yeshu yeshu2">&gt;</button>
                </div>
            </div>
        </div>
    </main>
</body>

</html>
<script src="./axios.min.js"></script>
<script>
    // 渲染
    function render(data) {
        var str = ''
        var str = data.map((item, index) => {
            return `
            <tr>
                <td><input type="checkbox"></td>
                <td>${item.id}</td>
                <td>${item.gangwei}</td>
                <td>${item.name}</td>
                <td>${item.paixu}</td>
                <td>${item.status ? '正常' : '异常'}</td>
                <td>${item.time}</td>
                <td><span class="iconfont icon_write" data_id="">&#xe616;</span><span class="iconfont icon_del" data-caozuo="${item.caozuo}" style=" padding-right: 0;">&#xe627;</span></td>
            </tr>
            `
        }).join('')

        // str如果未查询到数据则是一个空的字符串，然而我们可以给它一个if
        if (str == '') {
            str = '<tr class = "trr" ><td class="tdd" colspan="8">未查询到数据!</td></tr>'
        }
        document.querySelector('tbody').innerHTML = str

    }
    // 页面分页渲染的数据
    axios.get('/user/list', { params: { page: 1, count: 5 } }).then((res) => {
        render(res.data.list)
        // console.log(res.data);
    })
    // 上下页的点击事件
    var btns = document.querySelectorAll('.yeniu>button')
    var page = 1
    function renderlist() {
        axios.get('/user/list', { params: { page: page, count: 5 } }).then((res) => {
            render(res.data.list)
        })
    }
    btns[0].onclick = () => {
        if (page > 1) {
            page--
            renderlist()
        }
    }
    btns[1].onclick = () => {
        if (page < 4) {
            page++
            renderlist()
        }
    }
    // function pagesre(page) {
    //     var str = ''
    //     var str = page.map((item, index) => {
    //         return `
    //             <span class="tiao">共5条</span>
    //             <button class="yeshu yeshu1">&lt;</button>
    //             <span class="count">${item.}</span>
    //             <button class="yeshu yeshu2">&gt;</button>
    //         `
    //     }).join('')
    //     document.querySelector('.yeniu').innerHTML = str
    // }




    //  搜索
    var inputs = document.querySelector('.center_top>.sousuo')
    var btn = document.querySelector('.center_top>.ssbtn')
    btn.onclick = () => {
        axios.get('/user/search', { params: { searchkey: inputs.value } }).then((res) => {
            if (inputs.value == 0) {
                alert('请输入内容再查询')
            } else {
                render(res.data.list)
            }
        })
    }




    // 给删除添加绑定事件
    var tbodys = document.querySelector('tbody')
    tbodys.onclick = (e) => {
        if (e.target.tagName == 'SPAN' && e.target.classList.contains('icon_del')) {
            axios.post('/user/delete', { caozuo: e.target.dataset.caozuo }).then((res) => {
                renderbtn(res.data.list)
            })

        }
    }





</script>